.rui-alert {
  width: 100%;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: $border-width solid transparent;
  border-radius: $border-radius;
  display: flex;
  align-items: flex-start;

  &-title {
    overflow-wrap: break-word;
    overflow: hidden;
  }
  &-description {
    font-size:$font-size-sm;
  }

  $alert-status: ('success': $success, 'default': $primary, 'warning': $warning, 'danger': $danger);
  @each $state-string, $state-variable in $alert-status{
    &-#{$state-string}{
      @include alert-style($state-variable, $white)
    }
  }

  &-close{
    margin-left:auto;
    color: inherit;
    cursor: pointer;
  }
}
